import { Stack } from '../../Layout'
import { FaAddressBookIcon } from '../../Icon'
import { STYLE_TYPE_MAP, Text } from '../Text'

import type { Meta, StoryObj } from '@storybook/react'

// $ pict text.pict
const pict = [
  {
    size: 'XXL',
    weight: 'normal',
    color: 'TEXT_LINK',
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: undefined,
    weight: 'bold',
    color: 'TEXT_WHITE',
    leading: 'NONE',
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: undefined,
    weight: 'bold',
    color: undefined,
    leading: undefined,
    emphasis: true,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'L',
    weight: undefined,
    color: 'TEXT_LINK',
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XL',
    weight: 'normal',
    color: 'TEXT_BLACK',
    leading: 'NORMAL',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: undefined,
    weight: 'bold',
    color: 'TEXT_BLACK',
    leading: 'TIGHT',
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XL',
    weight: 'bold',
    color: 'TEXT_LINK',
    leading: undefined,
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'L',
    weight: 'bold',
    color: 'TEXT_DISABLED',
    leading: 'NORMAL',
    emphasis: true,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'XXL',
    weight: 'bold',
    color: 'inherit',
    leading: 'LOOSE',
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'M',
    weight: undefined,
    color: 'TEXT_BLACK',
    leading: 'NONE',
    emphasis: false,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'XXS',
    weight: 'normal',
    color: 'TEXT_WHITE',
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'S',
    weight: 'normal',
    color: 'TEXT_GREY',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XXL',
    weight: 'bold',
    color: 'TEXT_GREY',
    leading: 'NORMAL',
    emphasis: true,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: undefined,
    color: 'TEXT_WHITE',
    leading: 'NORMAL',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XL',
    weight: undefined,
    color: 'inherit',
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: 'bold',
    color: 'TEXT_BLACK',
    leading: undefined,
    emphasis: true,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'S',
    weight: 'bold',
    color: 'TEXT_BLACK',
    leading: 'LOOSE',
    emphasis: true,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'M',
    weight: 'bold',
    color: 'TEXT_DISABLED',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XL',
    weight: undefined,
    color: 'TEXT_WHITE',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: undefined,
    weight: undefined,
    color: 'TEXT_DISABLED',
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XL',
    weight: 'normal',
    color: 'TEXT_DISABLED',
    leading: 'NONE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XXL',
    weight: undefined,
    color: 'TEXT_DISABLED',
    leading: 'NONE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: undefined,
    weight: 'normal',
    color: 'inherit',
    leading: 'NORMAL',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'L',
    weight: 'bold',
    color: 'TEXT_GREY',
    leading: 'NONE',
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'L',
    weight: 'normal',
    color: 'inherit',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: undefined,
    weight: undefined,
    color: 'TEXT_GREY',
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: 'normal',
    color: 'inherit',
    leading: 'NONE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XXS',
    weight: 'bold',
    color: 'TEXT_GREY',
    leading: undefined,
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'S',
    weight: undefined,
    color: 'TEXT_WHITE',
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: undefined,
    color: 'TEXT_GREY',
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'M',
    weight: 'bold',
    color: 'TEXT_WHITE',
    leading: 'NORMAL',
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'S',
    weight: undefined,
    color: 'TEXT_LINK',
    leading: 'NORMAL',
    emphasis: false,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'M',
    weight: 'normal',
    color: undefined,
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'S',
    weight: undefined,
    color: 'TEXT_DISABLED',
    leading: 'NONE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XL',
    weight: undefined,
    color: undefined,
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XXL',
    weight: undefined,
    color: 'TEXT_BLACK',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XXS',
    weight: 'bold',
    color: 'TEXT_DISABLED',
    leading: 'TIGHT',
    emphasis: true,
    prefixIcon: <FaAddressBookIcon />,
    suffixIcon: undefined,
  },
  {
    size: 'XXS',
    weight: undefined,
    color: undefined,
    leading: 'NONE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'M',
    weight: undefined,
    color: 'inherit',
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'M',
    weight: 'bold',
    color: 'TEXT_GREY',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XXS',
    weight: 'normal',
    color: 'TEXT_LINK',
    leading: 'NONE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'M',
    weight: undefined,
    color: 'TEXT_LINK',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'S',
    weight: undefined,
    color: undefined,
    leading: 'NORMAL',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XXS',
    weight: undefined,
    color: 'inherit',
    leading: 'NORMAL',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'L',
    weight: undefined,
    color: undefined,
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: undefined,
    color: undefined,
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: undefined,
    color: 'TEXT_LINK',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XXL',
    weight: 'bold',
    color: 'TEXT_WHITE',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'XXL',
    weight: undefined,
    color: undefined,
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: undefined,
    weight: undefined,
    color: 'TEXT_LINK',
    leading: 'LOOSE',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: <FaAddressBookIcon />,
  },
  {
    size: 'S',
    weight: undefined,
    color: 'inherit',
    leading: 'TIGHT',
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XS',
    weight: undefined,
    color: 'TEXT_DISABLED',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XXS',
    weight: undefined,
    color: 'TEXT_BLACK',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'L',
    weight: 'normal',
    color: 'TEXT_BLACK',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'XL',
    weight: undefined,
    color: 'TEXT_GREY',
    leading: undefined,
    emphasis: false,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
  {
    size: 'L',
    weight: 'bold',
    color: 'TEXT_WHITE',
    leading: undefined,
    emphasis: true,
    prefixIcon: undefined,
    suffixIcon: undefined,
  },
]

export default {
  title: 'Components/Text/VRT',
  render: (args) => (
    <Stack gap={0.5}>
      {/* styleType ごとにペアワイズ法で抽出したパターンをあてる */}
      {[undefined, ...Object.keys(STYLE_TYPE_MAP)].map((styleType) =>
        pict.map((props, i) => (
          <Text
            {...props}
            {...args}
            styleType={styleType}
            // 白文字だと見えないので背景色を変える
            className={props.color === 'TEXT_WHITE' ? 'shr-bg-black' : undefined}
            key={i}
          />
        )),
      )}
    </Stack>
  ),
  args: {
    children: 'well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。',
  },
  parameters: {
    chromatic: { disableSnapshot: false },
  },
  tags: ['!autodocs'],
} satisfies Meta<typeof Text>

export const VRT = {}

export const VRTForcedColors: StoryObj = {
  ...VRT,
  parameters: {
    chromatic: { forcedColors: 'active' },
  },
}
